<!DOCTYPE html>
<html lang="en">
<head>
    <title>Form_validation</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
    <script src="/js/jquery.validation/1.14.0/messages_zh.min.js"></script>
    <script src="/js/vue/vue.min.js"></script>

    <style>
        input.error {
            border: 1px solid red;
        }
    </style>
</head>
<body>
<script src="/js/webSocket.js"></script>
<section id="container">
    <#include "sider.ftl">
    <section id="main-content">
        <section class="wrapper">
            <div class="table-agile-info">
                <div class="panel panel-default">
                    <section class="panel">
                        <header class="panel-heading">
                            修改角色权限
                        </header>
                        <div class="panel-body">
                            <div class="form" >
                                <form class="cmxform form-horizontal" id="editRolePermissionForm">
                                    <div class="form-group ">
                                        <label for="rname" class="control-label col-lg-3">角 色:</label>
                                        <div class="col-lg-10" style="left: 400px;bottom: 28px;">
                                            <select name="ruuid" style="width: 200px;height: 35px;margin-left: 24px" id="ruid">
                                                <option>请选择角色</option>
                                                <option v-for="(item,index) in result1" v-bind:value="item.ruuid">
                                                    {{item.rname}}
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                    <div style="height: 20px"></div>

                                    <div class="form-group" id="app">
                                        <label for="rname" class="control-label col-lg-3">权 限:</label>
                                        <div class="col-lg-7">
                                            <div  class="col-lg-2" v-for="(item,index) in result2">
                                                <input type="checkbox"  v-bind:value="item.pid" class="chk">{{item.pname}}
                                            </div>
                                        </div>

                                    </div>


                                    <div style="height: 40px"></div>

                                    <div class="form-group">
                                        <div class="col-lg-offset-5 col-lg-6">
                                            <button type="button" id="addBtn" class="btn btn-primary">修改权限</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </section>
                    <div style="height: 200px"></div>
                </div>
            </div>
            <#include "foot.ftl"><#--引入底部-->
        </section>

    </section>
</section>
</body>
</html>
<script type="text/javascript">
    var x=[];
    var app = new Vue({
        el: "#editRolePermissionForm",
        data: {
            result1: [],
            result2: []
        }
    });

    $(function () {

        $.ajax({
            type: "Post",
            url: "/role/allRole",
            dataType: "json",
            success: function (data) {
                app.result1 = data.role;
            }
        });

        $.ajax({
            type: "POST",
            url: "/role/getPermission",
            dataType: "json",
            success: function (data) {
                app.result2 = data.permission;
            }
        });

        $("#ruid").change(function () {
            if ($("#ruid").val()=="请选择角色") {

                $(".chk").each(function () {
                    $(this).prop("checked",false);
                });

                return;
            }
            $.ajax({
                type:"POST",
                url:"/role/getRoleById",
                data:{
                    ruuid:$("#ruid").val()
                },
                dataType:"json",
                success:function (data) {

                    $(".chk").each(function () {
                        $(this).prop("checked",false);
                    });

                    $.each(data.permission,function (index,obj) {
                        $(".chk[value='"+obj.pid+"']").prop("checked", true);
                    })
                }
            });

        });




        $("#addBtn").click(function () {

            $(".chk:checked").each(function () {
                x.push($(this).val());
            });
            $.ajax({
                type: "POST",
                url: "/role/addRolePermission",
                data: {
                    pid:JSON.stringify(x),
                    ruuid:$("#ruid").val()
                },
                dataType: "json",
                success: function (data) {
                    if (data.flag) {
                        alert("成功修改");
                        window.location.href = "/role/getRole"
                    }
                }
            });

        });

        /*$("#delBtn").click(function () {
            $(".chk:checked").each(function () {
                x.push($(this).val());
            });

            $.ajax({
                type: "POST",
                url: "/role/delRolePermission",
                data: {
                    ruuid: $("#ruid").val(),
                    pid: JSON.stringify(x)
                },
                dataType: "json",
                success: function (data) {
                    if (data.flag) {
                        alert("删除成功");
                        window.location.href = "/role/getRole";
                    }
                }
            });
        });*/


        /* $(".chk").change(function () {
             alert("???");
             $(".chk:checked").each(function () {
                 x.push($(this).val());
             });
             alert(x);
         });*/





    });


</script>

